<template>
	<view class="fix">
		<Fixtop>
			<template #l>
				<view class="iconfont icon-jiantouyou" @click="closepage"></view>
			</template>
			<template #c>
				<view class="tit">1/4类型选择</view>
			</template>
		</Fixtop>
	</view>
	<view class="sqbox">
		<view class="tip">
			<view class="ti-top">商家开店流程</view>
			<view class="ti-bot">
				<view class="cir">
					<view class="cir-t">1</view>
					<view class="cir-b">提交资料</view>
				</view>
				<view class="line">
					<view class="top">
						<view class="ll"></view>
					</view>
					<view class="b"></view>
				</view>
				<view class="cir">
					<view class="cir-t">2</view>
					<view class="cir-b">平台审核</view>
				</view>
				<view class="line">
					<view class="top">
						<view class="ll"></view>
					</view>
					<view class="b"></view>
				</view>
				<view class="cir">
					<view class="cir-t">3</view>
					<view class="cir-b">开始营业</view>
				</view>
			</view>
		</view>
		<uni-section title="商店类型" type="line" padding style="height: calc(100vh - 100px);">
			<uni-data-picker placeholder="请选择类型" popup-title="请选择开店类型" :localdata="dataTree" @change="onchange"
			v-model="usemdinfostore.mdinfo.lx"
				@nodeclick="onnodeclick">
			</uni-data-picker>
		</uni-section>
		<view class="bu" @click="nextbu">
			下一步
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import Fixtop from '@/components/fixtop/fixtop.vue'
	import {getstatusheight,gettitleheight} from '@/utils/getsysteminfo.js'
	import mdinfostore from '@/store/mdinfo.js'
	const heights=getstatusheight()+gettitleheight()+'px'
	const usemdinfostore=mdinfostore()
	const dataTree = [{
			text: "美食",
			value: "1-0",
			children: [{
					text: "快餐简餐",
					value: "1-1"
				},
				{
					text: "小吃",
					value: "1-2"
				},
				{
					text: "中式菜肴",
					value: "1-2"
				},
				{
					text: "全球美食",
					value: "1-2"
				},
				{
					text: "火锅",
					value: "1-2"
				}
			]
		},
		{
			text: "饮品",
			value: "2-0",
			children: [{
					text: "冰饮",
					value: "2-1"
				},
				{
					text: "热饮",
					value: "2-2"
				},
				{
					text: "甜饮",
					value: "2-3"
				},
				{
					text: "蜜雪系类",
					value: "2-4"
				}
			]
		},
		{
			text: "甜点",
			value: "3-0",
			children:[
				{
					text:"法式面包",
					value:"3-1"
				},
				{
					text:"蛋挞种类",
					value:"3-2"
				},
				{
					text:"蛋糕类型",
					value:"3-3"
				},
				{
					text:"炸点甜品",
					value:"3-4"
				}
			]
		}
	]
	const closepage = () => {
		uni.reLaunch({
			url: "/pages/index/index"
		})
	}
	const onchange = e => {
		usemdinfostore.mdinfo.lx=e.detail.value.map(e=>e.text).join('/')
	}
	const nextbu=()=>{
		if(usemdinfostore.mdinfo.lx.length==0){
			return uni.showToast({
				title:"请选择店铺类型！",
				icon:"none"
			})
		}
		uni.navigateTo({
			url:`/pages/mdinfo/mdinfo`
		})
	}
</script>

<style lang="scss" scoped>
	.fix{
		background-color: #ff6e53;
		padding: 0 30rpx;
		box-sizing: border-box;
		.iconfont{
			color: #fff;
		}
	}
	.tit{
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		color: #fff;
	}
	.sqbox {
		height: calc(100vh - v-bind(heights));
		width: 100vw;
		padding: 0 30rpx;
		position: relative;
        overflow: hidden;
.bu{
	position: absolute;
	width: 90%;
	height: 80rpx;
	background-color: #ff6e53;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25rpx;
	font-weight: 700;
	border-radius: 80rpx;
	color: #fff;
    bottom: 200rpx;
	left: 50%;
	transform: translateX(-50%);
}
		.tip {
			margin-top: 20rpx;
			height: 300rpx;
			width: 100%;
			border-radius: 10rpx;
			background-color: #f0f0f0;
			padding: 20rpx;

			.ti-top {
				font-size: 27rpx;
				// font-weight: 700;
			}

			.ti-bot {
				height: 250rpx;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.line {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 20rpx;

					.b {
						height: 30rpx;
					}

					.top {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.ll {
							height: 3rpx;
							width: 100%;
							background-color: #7b7b7b;
						}
					}
				}

				.cir {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 20rpx;

					.cir-t {
						width: 60rpx;
						height: 60rpx;
						background-color: #ff6e53;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 25rpx;
						color: #fff;
					}

					.cir-b {
						height: 30rpx;
						font-size: 25rpx;
						font-weight: 700;
					}
				}
			}
		}
	}

	.iconfont {
		font-size: 25rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		transform: rotate(180deg);
	}
</style>